<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../css/detail.css"> -->
    <!-- <link rel="stylesheet" href="../css/ui-base.css"> -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/request.js"></script>
    <script src="../js/cookie.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .wrap {
            width: 1140px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
            overflow: hidden;
            height: 600px;
        }

        .wrapBox {
            width: 400px;
            height: 400px;
            position: relative;
        }

        .wrapBox img {
            width: 100%;
            height: 100%;
        }

        .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .showBigImg {
            width: 400px;
            height: 400px;
            float: left;
            background-color: #0000004d;
            overflow: hidden;
            position: absolute;
            left: 500px;
            top: 0;
            display: none;
        }

        .showBigImg img {
            position: absolute;
            /* z-index: -1; */
            width: 800px;
            height: 800px;
        }

        .switchList {
            width: 400px;
            margin-top: 20px;
            display: flex;
        }

        .switchList li {
            flex: 1;
            margin: 5px;
            border: 1px solid transparent;
        }

        .switchList .active {
            border-color: rgb(158, 17, 17);
            cursor: pointer;
        }

        .switchList li img {
            width: 100%;
        }

        .wrap .left {
            float: left;
        }

        .wrap .right {
            float: left;
            /* overflow: hidden; */
            width: 640px;
            margin-left: 100px;
            background-color: #6ff;
            min-height: 400px;
        }

        .wrap .right h2 {
            font-size: 18px;
            margin-bottom: 20px;
        }

        .wrap .right>div {
            margin-bottom: 20px;
        }

        .detailBox {
            width: 1140px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="./login.html">你好,请登录</a>
        <a href="./register.html">注册</a>
    </div>
    <div class="wrap">
        <div class="left">
            <!-- <div class="wrapBox">
                <div class="shadow"></div>
                <img class="bigImg" src="../images/small.jpg" alt="">
            </div>
            <ul class="switchList">
                <li class="active"><img src="../images/small.jpg" bigImg="../images/big.jpg" alt=""></li>
                <li><img src="../images/girlsmall1.jpg" bigImg="../images/girlbig1.jpg" alt=""></li>
                <li><img src="../images/girlsmall2.jpg" bigImg="../images/girlbig2.jpg" alt=""></li>
                <li><img src="../images/girlsmall3.jpg" bigImg="../images/girlbig3.jpg" alt=""></li>
                <li><img src="../images/girlsmall4.jpg" bigImg="../images/girlbig4.jpg" alt=""></li>
            </ul>
            <div class="showBigImg">
                <img class="bigImg" src="../images/big.jpg" alt="">
            </div> -->
        </div>
        <div class="right">
            <!-- <h2>Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待</h2>
            <div class="price">
                京 东 价:￥ <span>4999.00</span> 降价通知
            </div>
            <div class="buyNum">
                <span class="reduce">-</span>
                <input type="number" value="1">
                <span class="add">+</span>
            </div>
            <button class="addToCar">
                加入购物车
            </button> -->
        </div>
    </div>
    <div class="detailBox">

    </div>
</body>
<script>
    var cookie = document.cookie;
    if (cookie) {
        var user = getCookie("lgc");
        if (user) {
            $(".box").html(`<a href="javascript:;">欢迎,${user}</a><button class="exit">退出</button>`);

            var button = document.getElementsByClassName("exit")[0];
            button.onclick = function () {
                setCookie("lgc", "", -1);
                location.reload();
            }
        }
    } else {
        var user = "";
    }

    var search = location.search;

    if (search) {
        var gid = search.split("=")[1];
        searchGoodsByGoodsId({ gid }).then(result => {
            console.log(result);
            var { status, msg, data: { goodsName, goodsId, price, bigList, smallList, slogan } } = result;

            // 商品图片显示
            var leftHtml = ` 
            <div class="wrapBox">
                <div class="shadow"></div>
                <img class="smallImg" src="${bigList[0]}" alt="">
            </div>
            <ul class="switchList">
                
            </ul>
            <div class="showBigImg">
                <img class="bigImg" src="${bigList[0]}" alt="">
            </div>`;
            $(".wrap .left").html(leftHtml);

            var switchListHtml = "";
            var len = bigList.length > 4 ? 4 : bigList.length
            for (var i = 0; i < smallList.length; i++) {
                switchListHtml += `<li><img src="${smallList[i]}" bigImg="${bigList[i]}" alt=""></li>`;
            }
            $(".left .switchList").html(switchListHtml);
            $(".left .switchList li").eq(0).addClass("active");

            // 商品详情
            var rightHtml = `
            <h1>${slogan}</h1>
            <div class="price">
                价&emsp;&emsp;格&emsp;<span style = "color:red; font-size:26px">￥${price}</span> 
            </div>
            <div class="buyNum">
                <span class="reduce">-</span>
                <input type="number" value="1">
                <span class="add">+</span>
            </div>
            <button class="addToCar">
                加入购物车
            </button>`;
            $(".wrap .right").html(rightHtml);
        })


    } else {
        location.href = "./goodsList.html";
    }
    $(document).on("mouseover", ".switchList li", function () {
        $(this).addClass("active").siblings().removeClass("active");
        var imgSrc = $(this).find("img").attr("bigImg");
        $(".smallImg, .bigImg").prop("src", imgSrc);
    })
    $(document).on("click", ".addToCar", function () {
        var user = getCookie("lgc");
        if (user) {  //用户已登录
            console.log(111);
        } else {    // 用户未登录  => 跳转至登录页 
            // 优化方法：
            // 把当前网址存一份 => 以参数数据形式 存放在url中(为了安全 先对url进行编码 再保存)
            location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
        }
    })
</script>

</html>